<script setup>
import {ref, reactive} from 'vue'
import {getWz} from '@/api/wz.ts'
import {ElMessage} from 'element-plus'
import {getbase, updateCate} from "../api/wz.js";
//获得props
const props = defineProps(['type', 'wid', 'baseData'])
const cateOpen = ref(false)
const wid = ref(props.wid)
const loading = reactive({
  cateLoading: false
})
const cateValue = ref('')
const copt = ref({
  expandTrigger: 'hover',
})
const baseData = ref()
let base = localStorage.getItem('wzbaseAdmin')
if (!base) {
  getbase().then(r => {
    baseData.value = r.data.data
    localStorage.setItem('wzbaseAdmin', JSON.stringify(r.data.data))
  })
} else {
  baseData.value = JSON.parse(base)
}
const editCate = () => {
  cateOpen.value = true
  loading.cateLoading = true
  getWz({wid: wid.value}).then(r => {
    loading.cateLoading = false
    cateValue.value = r.data.data.leader_ary
  }).catch(e => {
    loading.cateLoading = false
  })
}
const newCate = () => {
  updateCate({
    wid: wid.value,
    value: cateValue.value
  }).then(r => {
    cateOpen.value = false
    if (r.data.code == 200) {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      setTimeout(function () {
        window.location.reload()
      },1000)

    }
  }).catch(e=>{
    cateOpen.value = true
  })
}
</script>

<template>
  <span style="margin-right:10px;" v-if="props['type']=='cate'">
    <el-button type="primary" icon="Expand" @click="editCate">分类</el-button>
  </span>
  <el-dialog
      v-model="cateOpen"
      title="修改分类/所属地"
      width="500"
      align-center

  >
    <div v-loading="loading.cateLoading" style="padding:10px 0;">
      <el-cascader v-model="cateValue" :options="baseData.leaderInfo" :props="copt" size="large" filterable/>
    </div>
    <template #footer>
      <div class="dialog-footer" style="text-align: left;padding:10px 0;">
        <el-button type="primary" @click="newCate">确定修改</el-button>
        <el-button @click="cateOpen = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style>
.el-cascader--large {
  width: 300px !important;
  padding: 10px 0 !important;
}
</style>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
